<template>
	<view class="patient-content">
		<view class="patient-content-switch">
			<view class="selection">条件筛选</view>
		</view>
		<view class="patient-box-list">
			<view class="list-call">
				<view><text>时间</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindPickerChange('99',$event)">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>片区</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="areaIndex" :range="areaList" @change="bindPickerChange('0',$event)">
						<view>{{areaList[areaIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>门诊</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="outpatientIndex" :range="outpatientList" @change="bindPickerChange('1',$event)">
						<view>{{outpatientList[outpatientIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>部门（人员）</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="departmentIndex" :range="departmentList" @change="bindPickerChange('2',$event)">
						<view>{{departmentList[departmentIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>访问病种</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="diseaseIndex" :range="diseaseList" @change="bindPickerChange('3',$event)">
						<view>{{diseaseList[diseaseIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>预约项目</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="appointmentIndex" :range="appointmentList" @change="bindPickerChange('4',$event)">
						<view>{{appointmentList[appointmentIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>回访状态</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="stateIndex" :range="stateList" @change="bindPickerChange('5',$event)">
						<view>{{stateList[stateIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>到店状态</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="shopIndex" :range="shopList" @change="bindPickerChange('6',$event)">
						<view>{{shopList[shopIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>一级渠道</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('7',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>二级渠道</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('8',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>三级渠道</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('9',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>建档人</text></view>
				<view class="list-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入建档人进行查询"/>
				</view>
			</view>
			<view class="list-call">
				<view><text>跟进人</text></view>
				<view class="list-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入跟进人进行查询"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				areaIndex:0, // 片区
				areaList: ['请选择', '武汉', '恩施', '黄石'],
				outpatientIndex:0, // 门诊
				outpatientList: ['请选择', '徐东', '德米', '光谷'],
				departmentIndex:0, // 部门
				departmentList: ['请选择', '渠道人员', '企划人员', '网电咨询'],
				diseaseIndex:0, // 病种
				diseaseList: ['请选择', '种植', '美白', '牙周'],
				appointmentIndex:0, // 项目
				appointmentList: ['请选择', '种植', '正畸', '修复'],
				stateIndex:0, // 回访状态
				stateList: ['请选择', '待定', '跟进', '预约'],
				shopIndex:0, // 到店状态
				shopList: ['请选择', '到店', '预约'],
				channelIndex:0, // 渠道
				channelList: ['请选择', '渠道', '网络', '企划'],
				date: currentDate
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			onNavigationBarButtonTap(val) {
                if (val.index == 0) {
                    uni.navigateTo({
						url: `/pages/index/returnVisit/returnVisit-list`,
					})
                }
			},
			bindPickerChange(type,event){
				switch (type){
					case '0':
						this.areaIndex = event.target.value
						break;
					case '1':
						this.outpatientIndex = event.target.value
						break;
					case '2':
						this.departmentIndex = event.target.value
						break;
					case '3':
						this.diseaseIndex = event.target.value
						break;
					case '4':
						this.appointmentIndex = event.target.value
						break;
					case '5':
						this.stateIndex = event.target.value
						break;
					case '6':
						this.shopIndex = event.target.value
						break;
					case '7':
						this.channelIndex = event.target.value
						break;
					case '8':
						this.channelIndex = event.target.value
						break;
					case '9':
						this.channelIndex = event.target.value
						break;
					case '99':
						this.date = event.target.value
						break;
					default:
						break;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page,
	.patient-content{
		background-color: #FFFFFF;
		height: 100%;
	}
	.placeholderclass{
		color: #666666;
	}
	
	.patient-content-switch{
		text-align: center;
		
		.selection{
			border-bottom:2rpx solid #8abaff;
			color:#8abaff;
			padding: 20rpx 0;
		}
	}
	
	.patient-box-list{
		padding: 0 20rpx 30rpx;
		height: calc(100% - 92rpx);
		overflow: auto;
		
		.list-call{
			display: flex;
			align-items: center;
			border-bottom: 1px solid #CCCCCC;
			padding: 20rpx 10rpx;
			
			.list-input{
				text-align: right;
				padding-right: 15rpx;
			}
		}
	}
	
	
</style>
